<template>
  <div class="">
    <!-- view-wrapper -->
    <div class="head" >
      <el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="90px">
        <el-form-item label="关键字查询" prop="keyword">
          <el-input v-model="queryParams.keyword" placeholder="活动名称/订单号/盲盒奖品" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="用户查询" prop="customer">
          <el-input v-model="queryParams.customer" placeholder="手机号/姓名" clearable size="small"
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="支付类型"  prop="payType">
          <el-select v-model="queryParams.payType" placeholder="全部" size="small">
            <el-option v-for="item in payTypeList" :key="item.id" :label="item.value" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="交易时间：" prop="date">
          <el-date-picker v-model="date" type="daterange" value-format="yyyy-MM-dd" size="small" range-separator="至" 
            start-placeholder="开始日期" end-placeholder="结束日期" @change="handleTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="listBox">
      <div class="btn_top">
        <div class="money_list">
          <div class="m_money">交易总额：{{dataNum.orderMoney}}</div>
          <div class="m_money">优惠总额：{{dataNum.discountMoney}}</div>
          <div class="m_money">实付总额：{{dataNum.payMoney}}</div>
          <div class="m_money">CoCo使用数量：{{dataNum.cocoAmount}}</div>
          <div class="m_money">椰分使用数量：{{dataNum.tfAmount}}</div>
        </div>
        <div class="btnBox">
          <div style="margin-left: 0">
            <export-excel-button
              title="盲盒订单列表"
              action="/box/activity/order/export"
              :params="ExportParams"
            />
          </div>
        </div>
      </div>
      
      <el-table :data="orderList" border style="width: 100%;margin-top:14px" >
        <el-table-column label="序号" type="index" width="55" align="center" fixed />
        <el-table-column prop="activityName" align="center" label="活动名称" />
        <el-table-column prop="orderNo" align="center" label="订单号" />
        <el-table-column prop="createTime" align="center" label="交易时间" />
        <el-table-column prop="phoneNumber" align="center" label="手机号" />
        <el-table-column prop="customerName" align="center" label="姓名" />
        <el-table-column prop="priceName" align="center" label="价格名称" />
        <el-table-column prop="boxAmount" align="center" label="购买数量" />
        <el-table-column prop="orderMoney" align="center" label="交易金额" >
          <template slot-scope="scope">
            <div v-if="scope.row.orderMoney != ''">
               ￥<span>{{scope.row.orderMoney}}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="couponAmount" align="center" label="盲盒券使用数量" />
        <el-table-column prop="integralAmount" align="center" label="使用积分数量" >
          <template slot-scope="scope">
            <div v-if="scope.row.integralAmount != ''" class="boxCenter">
              <p>{{scope.row.integralAmount}}</p>
              <dict-tag :options="payTypeList" :value="scope.row.payType" v-if="scope.row.integralAmount != '- -'"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="discountMoney" align="center" label="优惠金额" />
        <el-table-column prop="payMoney" align="center" label="实付金额" />
        <el-table-column prop="payType" align="center" label="支付类型" >
          <template slot-scope="scope">
            <dict-tag :options="payTypeList" :value="scope.row.payType" v-if="scope.row.payType != '- -'"/>
            <p v-else>{{scope.row.payType}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="prizeName" align="center" label="盲盒奖品"  :show-overflow-tooltip="true" />
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
  
  </div>
</template>
<script>
import {
  getBoxOrderNum,
  adminDict
} from '@/api/blindBox/boxOrder'
import {
  getOrderList
} from '@/api/blindBox/activityDetail'
import ExportExcelButton from "@/components/ExportExcelButton/index";

export default {
  name: "shopDetail",
  components: {
    ExportExcelButton
  },
  props: {
    id: String,
    phone: String,
  },
  data() {
    return {
      orderList:[],
      total: 0,
      date: [],
      payTypeList:[],//支付类型
      queryParams: {
        keyword: '',//活动名称/订单号/盲盒奖品
        pageNum: 1,
        pageSize: 10,
        customer: '',//手机号码/姓名
        startTime: '',
        endTime: '',
        payType:'', //支付类型
      },
      dataNum:{},
    };
  },
  watch: {
   
  },
  computed: {
    ExportParams() {
      const params = {
        ...this.queryParams,
      };
      return params;
    },
  },
  created() {
    this.queryParams.customer = this.phone
    this.getadminDict()
    this.getNum()
  },
  mounted() {
  
  },
  methods: {
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
      this.getNum()
    },
    getadminDict() {
        //获取支付类型字典
        const params = {
          dictType: "shenye_box_pay_type",
        };
        adminDict(params).then((res) => {
          this.payTypeList = res.result[0].dictList;
          this.getList()
        });
      },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm();
      this.$refs["queryForm"].resetFields();
      this.queryParams.customer = ''
      this.date = []
      this.handleQuery();
    },
    handleTime(e){
      console.log('e',e)
      this.queryParams.startTime = this.date[0]
      this.queryParams.endTime = this.date[1]
    },
    //盲盒订单小计
    getNum(){
      if(this.date){
        this.queryParams.startTime = this.date[0]
        this.queryParams.endTime = this.date[1]
      }
      getBoxOrderNum(this.queryParams).then(res => {
        console.log('res',res)
        this.dataNum = res.result
      })
    },
    /** 查询盲盒订单列表 */
    getList() {
      this.loading = true;
      if(this.date){
        this.queryParams.startTime = this.date[0]
        this.queryParams.endTime = this.date[1]
      }
      getOrderList(this.queryParams).then(response => {
        const {records ,total} = response.result
        console.log('response',response)
        this.orderList = records
        this.total = total
        this.loading = false;
        this.orderList = this.orderList.map(item => {
            // console.log('item',item)
            Object.keys(item).forEach(key => {
              if (item[key] === '') {
                item[key] = '- -'
              }
            })
            // console.log('item',item)
            return item
          })
      });
    },
    
  },
};
</script>
<style lang="scss" scoped>
.head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
    margin-top: 10px;
  }
  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }
  .boxCenter{
    display: flex;
    flex-direction: row;
     align-items: center; 
     justify-content: center;
  }
  .btn_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    .money_list{
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 22px;
      color: #606266;
      vertical-align: middle;
      .m_money{
        margin-right: 30px;
      }
    }
  }
  .btnBox{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
